
<template>
  <BaseCharts :option="option"></BaseCharts>
</template>

<script lang="ts" setup>
import BaseCharts from '../../base/baseCharts.vue';
/** 数据 */
const dataArray = [
  { name: '类型1', value: 300 },
  { name: '类型2', value: 200 },
  { name: '类型3', value: 150 },
  { name: '类型4', value: 120 },
  { name: '类型5', value: 100 },
  { name: '其他', value: 50 },
]

/** 预设颜色 */
const colorList = [
  "#03acd1",
  "#04cab7",
  "#03c781",
  "#fce348",
  "#fc2d8a",
  "#0292fe",
]

const option = computed(() => {
  const data = {
    tooltip: {
      trigger: "item",
    },
    title: [
      {
        text: "30日",
        x: "43%",
        y: "48%",
        textStyle: {
          color: "#559dbd",
          fontSize: 20,
        },
      },
    ],
    series: [
      {
        // 饼图圈
        type: "pie",
        zlevel: 3,
        radius: ["52%", "57%"],
        center: ["50%", "50%"],
        itemStyle: {
          // borderColor: "#0A1934",
          borderWidth: 5,
          color: function (params: any) {
            return colorList[params.dataIndex];
          },
        },
        labelLine: {
          show: false,
          length: 5,
          length2: 0,
          lineStyle: {
            color: "transparent",
          },
        },
        label: {
          formatter: (params: any) => {
            return "●";
          },
        },
        data: dataArray,
      },
      {
        // 最外圆圈
        type: "pie",
        zlevel: 1,
        silent: true, //取消高亮
        radius: ["70%", "71%"],
        center: ["50%", "50%"],
        itemStyle: {
          color: function (params: any) {
            return colorList[params.dataIndex];
          },
        },
        labelLine: {
          show: false,
          length: 10,
          length2: 0,
          lineStyle: {
            color: "transparent",
          },
        },
        label: {
          show: true,
        },
        data: dataArray,
      },
    ],
  }
  return data
})
</script>

<style scoped lang="scss"></style>
